<template>
  <div class="crawler-config">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6" v-for="stat in statistics" :key="stat.title">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon>
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">{{ stat.title }}</div>
              <div class="stat-value">{{ stat.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主配置区域 -->
    <el-card class="config-main">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step title="平台配置" description="选择数据源和账号" />
        <el-step title="规则配置" description="设置抓取规则" />
        <el-step title="数据预览" description="验证数据格式" />
        <el-step title="任务配置" description="设置执行计划" />
      </el-steps>

      <!-- 步骤内容区 -->
      <div class="step-content">
        <!-- 第一步：平台配置 -->
        <div v-show="currentStep === 0">
          <el-form :model="platformConfig" label-width="120px">
            <!-- 平台选择 -->
            <el-form-item label="数据源平台">
              <el-select v-model="platformConfig.platform" placeholder="请选择平台" @change="handlePlatformChange">
                <el-option v-for="platform in platformList" :key="platform.value" :label="platform.label"
                  :value="platform.value">
                  <div class="platform-option">
                    <img :src="platform.icon" class="platform-icon" />
                    <span>{{ platform.label }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 账号配置 -->
            <el-form-item label="账号选择">
              <div class="account-config">
                <el-table :data="platformConfig.accounts" @selection-change="handleAccountSelection">
                  <el-table-column type="selection" width="55" />
                  <el-table-column label="账号" prop="name" />
                  <el-table-column label="状态">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                        {{ scope.row.status === 'active' ? '正常' : '异常' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="最后使用时间" prop="lastUsedTime" />
                  <el-table-column label="操作" width="180">
                    <template #default="scope">
                      <div style="display: flex; gap: 10px;">
                        <el-button type="primary" link @click="testAccount(scope.row)">
                          测试
                        </el-button>
                        <el-button type="danger" link @click="removeAccount(scope.row)">
                          删除
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="account-actions">
                  <el-button type="primary" @click="showAddAccountDialog">
                    添加账号
                  </el-button>
                  <el-button @click="batchTestAccounts">
                    批量测试
                  </el-button>
                </div>
              </div>
            </el-form-item>

            <!-- 代理配置 -->
            <el-form-item label="代理设置">
              <el-radio-group v-model="platformConfig.proxyType">
                <el-radio label="none">不使用代理</el-radio>
                <el-radio label="auto">自动分配</el-radio>
                <el-radio label="manual">手动指定</el-radio>
              </el-radio-group>

              <div v-if="platformConfig.proxyType === 'manual'" class="proxy-list">
                <el-table :data="platformConfig.proxyList">
                  <el-table-column label="代理地址" prop="host" />
                  <el-table-column label="端口" prop="port" width="100" />
                  <el-table-column label="类型" prop="type" width="100" />
                  <el-table-column label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                        {{ scope.row.status === 'active' ? '可用' : '不可用' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button type="primary" link @click="testProxy(scope.row)">
                        测试
                      </el-button>
                      <el-button type="danger" link @click="removeProxy(scope.row)">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="proxy-actions">
                  <el-button type="primary" @click="showAddProxyDialog">
                    添加代理
                  </el-button>
                  <el-button @click="importProxyList">
                    批量导入
                  </el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第二步：规则配置 -->
        <div v-show="currentStep === 1">
          <el-form :model="ruleConfig" label-width="120px">
            <!-- 数据类型 -->
            <el-form-item label="数据类型">
              <el-checkbox-group v-model="ruleConfig.dataTypes">
                <el-checkbox v-for="type in availableDataTypes" :key="type.value" :label="type.value">
                  {{ type.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <!-- 时间范围 -->
            <el-form-item label="时间范围">
              <el-date-picker v-model="ruleConfig.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>

            <!-- 关键词配置 -->
            <el-form-item label="关键词">
              <el-tag v-for="keyword in ruleConfig.keywords" :key="keyword" closable @close="removeKeyword(keyword)">
                {{ keyword }}
              </el-tag>
              <el-input v-if="showKeywordInput" v-model="newKeyword" class="keyword-input" size="small"
                @keyup.enter="addKeyword" @blur="addKeyword" />
              <el-button v-else class="button-new-keyword" size="small" @click="showKeywordInput = true">
                + 添加关键词
              </el-button>
            </el-form-item>

            <!-- 筛选条件 -->
            <el-form-item label="筛选条件">
              <div v-for="(filter, index) in ruleConfig.filters" :key="index" class="filter-item">
                <el-select v-model="filter.field" placeholder="选择字段">
                  <el-option v-for="field in availableFields" :key="field.value" :label="field.label"
                    :value="field.value" />
                </el-select>
                <el-select v-model="filter.operator" placeholder="条件">
                  <el-option label="大于" value=">" />
                  <el-option label="小于" value="<" />
                  <el-option label="等于" value="=" />
                  <el-option label="包含" value="contains" />
                </el-select>
                <el-input v-model="filter.value" placeholder="值" />
                <el-button type="danger" @click="removeFilter(index)">删除</el-button>
              </div>
              <el-button type="primary" @click="addFilter">添加条件</el-button>
            </el-form-item>

            <!-- 高级配置 -->
            <el-form-item label="高级配置">
              <el-collapse>
                <el-collapse-item title="请求配置">
                  <el-form-item label="请求间隔(秒)">
                    <el-input-number v-model="ruleConfig.advanced.requestInterval" :min="1" />
                  </el-form-item>
                  <el-form-item label="超时时间(秒)">
                    <el-input-number v-model="ruleConfig.advanced.timeout" :min="1" />
                  </el-form-item>
                  <el-form-item label="重试次数">
                    <el-input-number v-model="ruleConfig.advanced.retryTimes" :min="0" />
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第三步：数据预览 -->
        <div v-show="currentStep === 2">
          <div class="preview-actions">
            <el-button type="primary" @click="fetchPreviewData" :loading="previewLoading">
              获取预览数据
            </el-button>
            <el-button @click="exportPreview">导出预览</el-button>
          </div>

          <el-table v-loading="previewLoading" :data="previewData" border style="width: 100%">
            <el-table-column v-for="col in previewColumns" :key="col.prop" :prop="col.prop" :label="col.label" />
          </el-table>

          <div class="preview-stats">
            <el-alert title="数据预览统计" type="info" :description="previewStats" show-icon />
          </div>
        </div>

        <!-- 第四步：任务配置 -->
        <div v-show="currentStep === 3">
          <el-form :model="taskConfig" label-width="120px">
            <el-form-item label="任务名称">
              <el-input v-model="taskConfig.name" placeholder="请输入任务名称" />
            </el-form-item>

            <el-form-item label="执行方式">
              <el-radio-group v-model="taskConfig.executeType">
                <el-radio label="once">单次执行</el-radio>
                <el-radio label="schedule">定时执行</el-radio>
                <el-radio label="periodic">周期执行</el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="taskConfig.executeType === 'schedule'">
              <el-form-item label="执行时间">
                <el-date-picker v-model="taskConfig.scheduleTime" type="datetime" placeholder="选择执行时间" />
              </el-form-item>
            </template>

            <template v-if="taskConfig.executeType === 'periodic'">
              <el-form-item label="执行周期">
                <el-select v-model="taskConfig.period">
                  <el-option label="每小时" value="hourly" />
                  <el-option label="每天" value="daily" />
                  <el-option label="每周" value="weekly" />
                  <el-option label="每月" value="monthly" />
                </el-select>
              </el-form-item>
              <el-form-item label="具体时间">
                <el-time-picker v-model="taskConfig.periodicTime" />
              </el-form-item>
            </template>

            <el-form-item label="数据处理">
              <el-checkbox-group v-model="taskConfig.dataProcessing">
                <el-checkbox label="dedup">数据去重</el-checkbox>
                <el-checkbox label="clean">数据清洗</el-checkbox>
                <el-checkbox label="transform">格式转换</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="存储配置">
              <el-radio-group v-model="taskConfig.storageType">
                <el-radio label="database">数据库</el-radio>
                <el-radio label="file">文件</el-radio>
                <el-radio label="api">API推送</el-radio>
              </el-radio-group>

              <template v-if="taskConfig.storageType === 'file'">
                <el-select v-model="taskConfig.fileFormat">
                  <el-option label="CSV" value="csv" />
                  <el-option label="Excel" value="excel" />
                  <el-option label="JSON" value="json" />
                </el-select>
              </template>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤操作按钮 -->
        <div class="step-actions">
          <el-button v-if="currentStep > 0" @click="prevStep">
            上一步
          </el-button>
          <el-button type="primary" v-if="currentStep < 3" @click="nextStep">
            下一步
          </el-button>
          <el-button type="success" v-if="currentStep === 3" @click="saveTask">
            保存任务
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 添加账号弹窗 -->
    <el-dialog v-model="accountDialogVisible" title="添加账号" width="500px">
      <el-form :model="newAccount" label-width="100px">
        <el-form-item label="账号">
          <el-input v-model="newAccount.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newAccount.password" type="password" />
        </el-form-item>
        <el-form-item label="Cookie">
          <el-input v-model="newAccount.cookie" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="accountDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addAccount">确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加代理弹窗 -->
    <el-dialog v-model="proxyDialogVisible" title="添加代理" width="500px">
      <el-form :model="newProxy" label-width="100px">
        <el-form-item label="代理地址">
          <el-input v-model="newProxy.host" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="newProxy.port" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="newProxy.type">
            <el-option label="HTTP" value="http" />
            <el-option label="SOCKS5" value="socks5" />
          </el-select>
        </el-form-item>
        <el-form-item label="认证信息">
          <el-input v-model="newProxy.username" placeholder="用户名" />
          <el-input v-model="newProxy.password" type="password" placeholder="密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="proxyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addProxy">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/api/request'

// 当前步骤
const currentStep = ref(0)

// 统计数据
const statistics = ref([
  { title: '总任务数', value: 125, icon: 'DataLine' },
  { title: '运行中任务', value: 8, icon: 'Loading' },
  { title: '今日数据量', value: '12,456', icon: 'DataAnalysis' },
  { title: '可用账号', value: 32, icon: 'User' }
])

// 平台配置
const platformConfig = reactive({
  platform: '',
  accounts: [
    { name: 'crawler_account_1', status: 'active', lastUsedTime: '2023-10-15 08:30:00' },
    { name: 'crawler_account_2', status: 'active', lastUsedTime: '2023-10-14 16:45:00' },
    { name: 'crawler_account_3', status: 'danger', lastUsedTime: '2023-10-10 10:15:00' },
    { name: 'crawler_account_4', status: 'active', lastUsedTime: '2023-10-15 09:20:00' }
  ],
  selectedAccounts: [], // 添加这个属性来存储选中的账号
  proxyType: 'none',
  proxyList: []
})

// 规则配置
const ruleConfig = reactive({
  dataTypes: [],
  dateRange: [],
  keywords: [],
  filters: [],
  advanced: {
    requestInterval: 1,
    timeout: 30,
    retryTimes: 3
  }
})

// 预览数据
const previewLoading = ref(false)
const previewData = ref([])
const previewColumns = ref([])
const previewStats = ref('')

// 任务配置
const taskConfig = reactive({
  name: '',
  executeType: 'once',
  scheduleTime: null,
  period: 'daily',
  periodicTime: null,
  dataProcessing: [],
  storageType: 'database',
  fileFormat: 'csv'
})

// 弹窗控制
const accountDialogVisible = ref(false)
const proxyDialogVisible = ref(false)

// 新账号/代理表单
const newAccount = reactive({
  username: '',
  password: '',
  cookie: ''
})

const newProxy = reactive({
  host: '',
  port: '',
  type: 'http',
  username: '',
  password: ''
})

// 可用数据类型
const availableDataTypes = [
  { label: '用户信息', value: 'userInfo' },
  { label: '发布内容', value: 'posts' },
  { label: '评论数据', value: 'comments' },
  { label: '互动数据', value: 'interactions' }
]

// 可用字段
const availableFields = [
  { label: '点赞数', value: 'likes' },
  { label: '评论数', value: 'comments' },
  { label: '转发数', value: 'shares' },
  { label: '播放量', value: 'views' }
]

const platformList = [
  { label: '抖音', value: 'douyin' },
  { label: '快手', value: 'kuaishou' },
  { label: '小红书', value: 'xiaohongshu' },
  { label: 'B站', value: 'bilibili' },
  { label: '微博', value: 'weibo' },
]

// 方法
const nextStep = async () => {
  if (validateCurrentStep()) {
    // 当在规则配置步骤(第二步)点击下一步时调用API
    if (currentStep.value === 1) {
      try {
        // 根据选择的平台准备不同的请求数据
        let requestData;
        let apiEndpoint = '/kuaishou-api/api/v1/command';

        if (platformConfig.platform === 'douyin') {
          // 抖音平台参数
          requestData = {
            platform: 'douyin',
            command: 'getVideosInfo',
            params: {}
          };
        } else if (platformConfig.platform === 'xiaohongshu') {
          // 小红书平台参数
          apiEndpoint = '/xiaohongshu-api/api/v1/command';
          requestData = {
            platform: 'xiaohongshu',
            command: 'getNotesInfo',
            params: {
              dataTypes: ruleConfig.dataTypes,
              dateRange: ruleConfig.dateRange,
              keywords: ruleConfig.keywords,
              filters: ruleConfig.filters
            }
          };
        } else {
          // 快手和其他平台保持原有参数
          requestData = ruleConfig;
        }

        // 使用代理路径调用API接口
        const response = await fetch(apiEndpoint, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(requestData)
        });

        if (!response.ok) {
          throw new Error('API调用失败');
        }

        const data = await response.json();
        ElMessage.success('规则配置已提交成功');
      } catch (error) {
        ElMessage.error('提交规则配置失败: ' + error.message);
        return; // 若调用失败则不进行下一步
      }
    }

    currentStep.value++;
  }
}

const prevStep = () => {
  currentStep.value--
}

const validateCurrentStep = () => {
  switch (currentStep.value) {
    case 0:
      if (!platformConfig.platform) {
        ElMessage.warning('请选择平台')
        return false
      }
      if (platformConfig.selectedAccounts.length === 0) {
        ElMessage.warning('请至少选择一个账号')
        return false
      }
      break
    case 1:
      if (ruleConfig.dataTypes.length === 0) {
        ElMessage.warning('请至少选择一种数据类型')
        return false
      }
      break
    // ... 其他步骤验证
  }
  return true
}

// 账号相关方法
const handleAccountSelection = (selection) => {
  platformConfig.selectedAccounts = selection;
  // 不要覆盖原始账号列表
}

const showAddAccountDialog = () => {
  accountDialogVisible.value = true
}

const addAccount = async () => {
  try {
    // 调用API添加账号
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('账号添加成功')
    accountDialogVisible.value = false
  } catch (error) {
    ElMessage.error('账号添加失败')
  }
}

// 代理相关方法
const showAddProxyDialog = () => {
  proxyDialogVisible.value = true
}

const addProxy = async () => {
  try {
    // 调用API添加代理
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('代理添加成功')
    proxyDialogVisible.value = false
  } catch (error) {
    ElMessage.error('代理添加失败')
  }
}

// 预览相关方法
const fetchPreviewData = async () => {
  previewLoading.value = true
  try {
    // 根据选择的平台调用不同API
    let apiEndpoint = '';
    let requestData = {};

    if (platformConfig.platform === 'douyin') {
      // 抖音API接口 - 与videoPreview保持一致
      apiEndpoint = '/douyin/videos';
      requestData = {
        page: 1,
        limit: 10
      };

      // 参考videoPreview中的请求方式
      const requestParams = {
        timeout: ruleConfig.advanced.timeout * 1000,
        headers: {
          'X-Request-Time': new Date().toISOString(),
          'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
        },
        params: {
          ...requestData
        },
        // 使用默认baseURL
      };

      // 记录请求开始时间
      const startTime = performance.now();
      console.log(`请求抖音API: ${apiEndpoint}`);

      // 发送请求
      const response = await request.get(apiEndpoint, requestParams);
      console.log('抖音API响应状态:', response.status);
      console.log('抖音API响应数据:', response.data);

      // 处理响应数据 - 与videoPreview保持一致
      if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
        previewData.value = response.data.data.list || [];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'platform', label: '平台' },
          { prop: 'aweme_id', label: '作品ID' },
          {
            prop: 'create_time', label: '创建时间', formatter: (row) => {
              return new Date(row.create_time * 1000).toLocaleString();
            }
          },
          { prop: 'crawl_time', label: '抓取时间' }
        ];
        previewStats.value = `共 ${previewData.value.length} 条数据`;
        ElMessage.success(`成功获取${previewData.value.length}条抖音数据`);
      } else {
        previewData.value = [];
        console.warn('抖音API返回的数据格式不符合预期');
        ElMessage.warning('数据格式异常，请联系管理员');
      }
    }
    // 快手API接口调用逻辑
    else if (platformConfig.platform === 'kuaishou') {
      // 使用request模块发送GET请求
      // 与videoPreview保持一致的API端点
      apiEndpoint = '/kuaishouhao/videos';

      // 准备请求参数（与videoPreview保持一致的格式）
      const requestParams = {
        timeout: ruleConfig.advanced.timeout * 1000,
        headers: {
          'X-Request-Time': new Date().toISOString(),
          'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
        },
        params: {
          page: 1,
          limit: 10,
          // 以下参数根据videoPreview的格式调整
          command: 'getPostsInfo',
          dataTypes: JSON.stringify(ruleConfig.dataTypes),
          dateRange: JSON.stringify(ruleConfig.dateRange),
          keywords: JSON.stringify(ruleConfig.keywords),
          filters: JSON.stringify(ruleConfig.filters),
          accounts: JSON.stringify(platformConfig.selectedAccounts.map(account => account.name)),
          proxy: platformConfig.proxyType === 'none' ? 'null' : JSON.stringify(platformConfig.proxyList[0])
        }
      };

      // 记录请求开始时间
      const startTime = performance.now();
      console.log(`请求快手API: ${apiEndpoint}`);

      // 发送请求（不设置baseURL，使用默认的/api）
      const response = await request.get(apiEndpoint, requestParams);

      // 记录请求结束时间
      const endTime = performance.now();
      console.log(`快手API响应耗时: ${(endTime - startTime).toFixed(2)}ms`);
      console.log('快手API响应状态:', response.status);
      console.log('快手API响应数据:', response.data);

      // 处理响应数据（根据videoPreview的格式调整）
      if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
        previewData.value = response.data.data.list || [];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'aweme_id', label: '作品ID' },
          { prop: 'platform', label: '平台' },
          {
            prop: 'create_time', label: '创建时间', formatter: (row) => {
              return new Date(row.create_time * 1000).toLocaleString();
            }
          },
          { prop: 'crawl_time', label: '抓取时间' },
          // 可以根据实际返回的其他字段添加更多列
          // { prop: 'other_field', label: '其他字段' }
        ];
        // 更新统计信息
        previewStats.value = `共 ${previewData.value.length} 条数据，预计可抓取数据约${Math.ceil(previewData.value.length / 0.1)}条`;
        ElMessage.success(`成功获取${previewData.value.length}条快手数据`);
      } else {
        previewData.value = [];
        console.warn('快手API返回的数据格式不符合预期');
        ElMessage.warning('数据格式异常，请联系管理员');
      }
    } else if (platformConfig.platform === 'xiaohongshu') {
      // 小红书API接口调用逻辑
      apiEndpoint = '/xiaohongshu-api/api/v1/command';

      // 准备请求参数
      const requestParams = {
        timeout: ruleConfig.advanced.timeout * 1000,
        headers: {
          'X-Request-Time': new Date().toISOString(),
          'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
        },
        data: {
          platform: 'xiaohongshu',
          command: 'getNotesInfo',
          params: {
            dataTypes: ruleConfig.dataTypes,
            dateRange: ruleConfig.dateRange,
            keywords: ruleConfig.keywords,
            filters: ruleConfig.filters,
            page: 1,
            limit: 10
          }
        }
      };

      // 发送POST请求
      const response = await request.post(apiEndpoint, requestParams);

      // 处理响应数据
      if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
        previewData.value = response.data.data.list || [];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'platform', label: '平台' },
          { prop: 'note_id', label: '笔记ID' },
          {
            prop: 'create_time', label: '创建时间', formatter: (row) => {
              return new Date(row.create_time * 1000).toLocaleString();
            }
          },
          { prop: 'crawl_time', label: '抓取时间' }
        ];
        previewStats.value = `共 ${previewData.value.length} 条数据`;
        ElMessage.success(`成功获取${previewData.value.length}条小红书数据`);
      } else {
        previewData.value = [];
        console.warn('小红书API返回的数据格式不符合预期');
        ElMessage.warning('数据格式异常，请联系管理员');
      }
    } else if (platformConfig.platform === 'bilibili') {
      // B站API接口调用逻辑
      apiEndpoint = '/bilibili-api/api/v1/command';

      // 准备请求参数
      const requestParams = {
        timeout: ruleConfig.advanced.timeout * 1000,
        headers: {
          'X-Request-Time': new Date().toISOString(),
          'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
        },
        data: {
          platform: 'bilibili',
          command: 'getVideosInfo',
          params: {
            dataTypes: ruleConfig.dataTypes,
            dateRange: ruleConfig.dateRange,
            keywords: ruleConfig.keywords,
            filters: ruleConfig.filters,
            page: 1,
            limit: 10
          }
        }
      };

      // 发送POST请求
      const response = await request.post(apiEndpoint, requestParams);

      // 处理响应数据
      if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
        previewData.value = response.data.data.list || [];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'title', label: '视频标题' },
          { prop: 'author', label: 'UP主' },
          { prop: 'publishTime', label: '发布时间' },
          { prop: 'views', label: '播放量' },
          { prop: 'likes', label: '点赞数' },
          { prop: 'comments', label: '评论数' },
          { prop: 'shares', label: '分享数' }
        ];
        previewStats.value = `共 ${previewData.value.length} 条数据`;
        ElMessage.success(`成功获取${previewData.value.length}条B站数据`);
      } else {
        previewData.value = [];
        console.warn('B站API返回的数据格式不符合预期');
        ElMessage.warning('数据格式异常，请联系管理员');
      }
    } else if (platformConfig.platform === 'weibo') {
      // 微博API接口调用逻辑
      apiEndpoint = '/weibo-api/api/v1/command';

      // 准备请求参数
      const requestParams = {
        timeout: ruleConfig.advanced.timeout * 1000,
        headers: {
          'X-Request-Time': new Date().toISOString(),
          'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
        },
        data: {
          platform: 'weibo',
          command: 'getPostsInfo',
          params: {
            dataTypes: ruleConfig.dataTypes,
            dateRange: ruleConfig.dateRange,
            keywords: ruleConfig.keywords,
            filters: ruleConfig.filters,
            page: 1,
            limit: 10
          }
        }
      };

      // 发送POST请求
      const response = await request.post(apiEndpoint, requestParams);

      // 处理响应数据
      if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
        previewData.value = response.data.data.list || [];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'content', label: '内容' },
          { prop: 'author', label: '博主' },
          { prop: 'publishTime', label: '发布时间' },
          { prop: 'views', label: '阅读量' },
          { prop: 'likes', label: '点赞数' },
          { prop: 'comments', label: '评论数' },
          { prop: 'shares', label: '转发数' }
        ];
        previewStats.value = `共 ${previewData.value.length} 条数据`;
        ElMessage.success(`成功获取${previewData.value.length}条微博数据`);
      } else {
        previewData.value = [];
        console.warn('微博API返回的数据格式不符合预期');
        ElMessage.warning('数据格式异常，请联系管理员');
      }
    } else {
      // 其他平台保持原有假数据逻辑
      await new Promise(resolve => setTimeout(resolve, 1000));
      let sampleData;

      if (platformConfig.platform === 'xiaohongshu') {
        // 小红书假数据 - 与API返回格式保持一致
        sampleData = [
          { id: '1', platform: 'xiaohongshu', note_id: 'note_001', create_time: 1697325000, crawl_time: '2023-10-15 11:30:00' },
          { id: '2', platform: 'xiaohongshu', note_id: 'note_002', create_time: 1697239500, crawl_time: '2023-10-14 17:45:00' }
        ];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'platform', label: '平台' },
          { prop: 'note_id', label: '笔记ID' },
          {
            prop: 'create_time', label: '创建时间', formatter: (row) => {
              return new Date(row.create_time * 1000).toLocaleString();
            }
          },
          { prop: 'crawl_time', label: '抓取时间' }
        ];
      } else if (platformConfig.platform === 'bilibili') {
        // B站假数据
        sampleData = [
          { id: 'video_001', title: '游戏攻略解说', author: 'game_master', publishTime: '2023-10-15 18:20:00', views: 156000, likes: 12500, comments: 2380, shares: 5600 },
          { id: 'video_002', title: '科技产品评测', author: 'tech_reviewer', publishTime: '2023-10-14 20:10:00', views: 89000, likes: 7800, comments: 1560, shares: 3200 }
        ];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'title', label: '视频标题' },
          { prop: 'author', label: 'UP主' },
          { prop: 'publishTime', label: '发布时间' },
          { prop: 'views', label: '播放量' },
          { prop: 'likes', label: '点赞数' },
          { prop: 'comments', label: '评论数' },
          { prop: 'shares', label: '分享数' }
        ];
      } else if (platformConfig.platform === 'weibo') {
        // 微博假数据
        sampleData = [
          { id: 'weibo_001', content: '今日热点事件点评...', author: 'news_commentator', publishTime: '2023-10-15 12:30:00', likes: 56000, comments: 8900, shares: 24500, views: 1200000 },
          { id: 'weibo_002', content: '明星最新动态...', author: 'entertainment_blogger', publishTime: '2023-10-15 11:15:00', likes: 89000, comments: 12500, shares: 36800, views: 2500000 }
        ];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'content', label: '内容' },
          { prop: 'author', label: '博主' },
          { prop: 'publishTime', label: '发布时间' },
          { prop: 'views', label: '阅读量' },
          { prop: 'likes', label: '点赞数' },
          { prop: 'comments', label: '评论数' },
          { prop: 'shares', label: '转发数' }
        ];
      } else {
        // 默认假数据
        sampleData = [
          { id: 'post_001', title: 'AI技术在爬虫领域的应用', author: 'tech_crawler', publishTime: '2023-09-15 14:30:00', likes: 256, comments: 42, shares: 18 },
          { id: 'post_002', title: '大数据时代的信息采集技术', author: 'data_miner', publishTime: '2023-09-05 09:15:00', likes: 189, comments: 27, shares: 12 }
        ];
        previewColumns.value = [
          { prop: 'id', label: 'ID' },
          { prop: 'title', label: '标题' },
          { prop: 'author', label: '作者' },
          { prop: 'publishTime', label: '发布时间' },
          { prop: 'likes', label: '点赞数' },
          { prop: 'comments', label: '评论数' },
          { prop: 'shares', label: '分享数' }
        ];
      }

      previewData.value = sampleData;
      previewStats.value = `共 ${previewData.value.length} 条数据，预计可抓取数据约1000条`;
      previewLoading.value = false;
      return;
    }

    // 更新统计信息
    previewStats.value = `共 ${previewData.value.length} 条数据，预计可抓取数据约${Math.ceil(previewData.value.length / 0.1)}条`;
  } catch (error) {
    // 增强错误处理
    if (error.response) {
      // 服务器返回了错误响应
      ElMessage.error(`获取预览数据失败: ${error.response.status} ${error.response.statusText}`);
      console.error('响应状态:', error.response.status);
      console.error('响应数据:', error.response.data);
    } else if (error.request) {
      // 请求已发送但未收到响应
      ElMessage.error('获取预览数据失败: 服务器无响应');
      console.error('请求详情:', error.request);
    } else if (error.name === 'TimeoutError') {
      ElMessage.error('请求超时，请检查网络或调整超时设置');
    } else {
      // 设置请求时发生错误
      ElMessage.error(`获取预览数据失败: ${error.message}`);
    }
    // 出错时显示一些示例数据，提高用户体验
    let sampleData;
    if (platformConfig.platform === 'douyin') {
      sampleData = [
        { id: 'video_001', title: '抖音热门视频创作技巧', author: 'douyin_creator', publishTime: '2023-10-15 14:30:00', likes: 15680, comments: 982, shares: 3250, playCount: 568000 },
        { id: 'video_002', title: '抖音算法解析与流量提升', author: 'algorithm_expert', publishTime: '2023-10-14 09:15:00', likes: 8920, comments: 546, shares: 1870, playCount: 320000 }
      ];
      previewColumns.value = [
        { prop: 'id', label: 'ID' },
        { prop: 'title', label: '视频标题' },
        { prop: 'author', label: '作者' },
        { prop: 'publishTime', label: '发布时间' },
        { prop: 'playCount', label: '播放量' },
        { prop: 'likes', label: '点赞数' },
        { prop: 'comments', label: '评论数' },
        { prop: 'shares', label: '分享数' }
      ];
    } else {
      sampleData = [
        { id: 'post_001', title: 'AI技术在爬虫领域的应用', author: 'tech_crawler', publishTime: '2023-09-15 14:30:00', likes: 256, comments: 42, shares: 18 },
        { id: 'post_002', title: '大数据时代的信息采集技术', author: 'data_miner', publishTime: '2023-09-05 09:15:00', likes: 189, comments: 27, shares: 12 }
      ];
      previewColumns.value = [
        { prop: 'id', label: 'ID' },
        { prop: 'title', label: '标题' },
        { prop: 'author', label: '作者' },
        { prop: 'publishTime', label: '发布时间' },
        { prop: 'likes', label: '点赞数' },
        { prop: 'comments', label: '评论数' },
        { prop: 'shares', label: '分享数' }
      ];
    }
    previewData.value = sampleData;
    previewStats.value = `数据获取失败，显示示例数据 (${sampleData.length}条)`;
  } finally {
    previewLoading.value = false;
  }
}

// 保存任务
const saveTask = async () => {
  try {
    // 调用API保存任务
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('任务保存成功')
    // 跳转到任务列表
  } catch (error) {
    ElMessage.error('任务保存失败')
  }
}
</script>

<style lang="scss" scoped>
.crawler-config {
  margin-right: 50px;
  padding: 20px;
  min-height: 100vh;
  background:
    linear-gradient(45deg, #000b1a 0%, #0a192f 30%, #1b0f2e 60%, #2c0b30 100%),
    repeating-linear-gradient(90deg,
      transparent 0%,
      rgba(64, 255, 218, 0.1) 20%,
      transparent 40%,
      rgba(247, 37, 133, 0.1) 60%,
      transparent 80%),
    url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence baseFrequency="0.5" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
  color: #e6f1ff;
  overflow-x: hidden;
  position: relative;
  z-index: 0;

  // 核心科技变量
  --neon-blue: #64ffda;
  --neon-purple: #9d4edd;
  --neon-pink: #f72585;
  --glow-blue: 0 0 15px #64ffda, 0 0 30px #64ffda, 0 0 50px rgba(100, 255, 218, 0.8);
  --glow-purple: 0 0 10px #9d4edd, 0 0 20px #9d4edd, 0 0 30px rgba(157, 78, 221, 0.6);
  --grid-bg: linear-gradient(rgba(100, 255, 218, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 255, 218, 0.1) 1px, transparent 1px);
  --tech-font: 'Orbitron', 'Rajdhani', 'Consolas', monospace;

  // 网格背景
  &:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grid-bg);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
  }

  // 粒子效果
  &:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      radial-gradient(circle, rgba(100, 255, 218, 0.1) 1px, transparent 1px),
      radial-gradient(circle, rgba(157, 78, 221, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    pointer-events: none;
    z-index: -1;
    animation: float 30s linear infinite;
  }

  .stat-cards {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;

    .el-card {
      border: 2px dashed #64ffda;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(100, 255, 218, 0.03) 0%, rgba(157, 78, 221, 0.02) 100%);
      backdrop-filter: blur(15px);
      box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.05), 0 0 80px rgba(100, 255, 218, 0.2);
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: glitch 15s infinite;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        background: linear-gradient(45deg, #64ffda, #9d4edd, #f72585);
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0.5;
        z-index: -1;
        animation: border-flow 6s linear infinite;
      }

      &:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.1), 0 0 100px rgba(100, 255, 218, 0.3);
        animation: glitch 5s infinite;
      }
    }

    .stat-card {
      display: flex;
      align-items: center;
      gap: 20px;
      font-family: var(--tech-font);
      padding: 20px;

      .stat-icon {
        font-size: 32px;
        color: var(--neon-blue);
        text-shadow: var(--glow-blue);
        padding: 15px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(100, 255, 218, 0.2) 0%, transparent 70%);
        border: 2px dashed #64ffda;
        box-shadow: var(--glow-blue);
        animation: pulse 2s infinite;
      }

      .stat-info {
        .stat-title {
          font-size: 14px;
          color: #8892b0;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: #e6f1ff;
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px var(--neon-blue);
          position: relative;

          &:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 60%;
            height: 2px;
            background: linear-gradient(90deg, var(--neon-blue), transparent);
            animation: underline-glitch 3s infinite;
          }
        }
      }
    }
  }

  .config-main {
    border: 2px dashed #64ffda;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 35, 68, 0.9) 100%);
    backdrop-filter: blur(15px);
    box-shadow: 0 0 80px rgba(100, 255, 218, 0.2), inset 0 0 40px rgba(100, 255, 218, 0.05);
    overflow: hidden;
    position: relative;
    z-index: 1;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg,
          transparent 0%,
          var(--neon-blue) 20%,
          var(--neon-purple) 50%,
          var(--neon-pink) 80%,
          transparent 100%);
      animation: scan 6s linear infinite, glitch 10s infinite;
    }

    .el-steps {
      padding: 25px;
      background-color: rgba(10, 25, 47, 0.5);
      border-bottom: 2px dashed #64ffda;
      position: relative;

      .el-step {
        font-family: var(--tech-font);

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg,
              rgba(100, 255, 218, 0.1) 0%,
              rgba(100, 255, 218, 0.5) 50%,
              rgba(100, 255, 218, 0.1) 100%);
          top: 15px;
          left: 0;
          z-index: 1;
        }

        .el-step__icon {
          border: 2px dashed #64ffda;
          background-color: rgba(10, 25, 47, 0.8);
          width: 32px;
          height: 32px;
          z-index: 2;
          color: #8892b0;
          transition: all 0.3s ease;
          animation: pulse 3s infinite;

          &.is-success {
            background: radial-gradient(circle, rgba(100, 255, 218, 0.2) 0%, rgba(10, 25, 47, 0.8) 80%);
            border-color: var(--neon-blue);
            color: var(--neon-blue);
            box-shadow: var(--glow-blue);
            transform: scale(1.1);
          }
        }

        .el-step__title {
          color: #8892b0;
          font-weight: 500;

          &.is-success {
            color: var(--neon-blue);
            text-shadow: var(--glow-blue);
            animation: pulse 2s infinite;
          }
        }
      }
    }

    .step-content {
      margin-top: 30px;
      padding: 30px;
      font-family: var(--tech-font);
      position: relative;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50px;
        height: 100%;
        width: 1px;
        background: linear-gradient(to bottom,
            transparent 0%,
            rgba(100, 255, 218, 0.3) 20%,
            rgba(100, 255, 218, 0.3) 80%,
            transparent 100%);
        animation: glitch 10s infinite;
      }

      .el-form-item {
        margin-bottom: 30px;
        padding-left: 80px;
        position: relative;

        &:before {
          content: '▣';
          position: absolute;
          left: 50px;
          color: rgba(100, 255, 218, 0.5);
          text-shadow: var(--glow-blue);
          transform: translateX(-50%);
        }

        .el-form-item__label {
          font-weight: 500;
          color: #ccd6f6;
          font-size: 15px;
          letter-spacing: 0.5px;
          padding: 0 15px 0 0;
          width: auto;
        }
      }

      .el-select,
      .el-input,
      .el-date-picker,
      .el-checkbox,
      .el-radio,
      .el-input-number {
        border: 2px dashed #64ffda;
        border-radius: 4px;
        background-color: rgba(10, 25, 47, 0.6);
        color: #ccd6f6;
        transition: all 0.3s ease;

        &:hover {
          border-color: var(--neon-blue);
          box-shadow: var(--glow-blue);
        }

        input,
        select,
        textarea {
          background-color: transparent !important;
          color: #ccd6f6 !important;
          border: none !important;
          padding: 8px 12px !important;

          &::placeholder {
            color: #566684 !important;
            font-style: italic;
          }
        }
      }

      .el-button {
        border: 2px dashed #64ffda;
        border-radius: 4px;
        background: linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.05) 100%);
        color: #ccd6f6;
        font-family: var(--tech-font);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        padding: 8px 20px;

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.2), transparent);
          transition: 0.6s;
          transform: skewX(-20deg);
        }

        &:hover {
          border-color: var(--neon-blue);
          box-shadow: var(--glow-blue);
          color: var(--neon-blue);

          &:before {
            left: 100%;
          }
        }

        &.el-button--primary {
          background: linear-gradient(135deg, rgba(100, 255, 218, 0.2) 0%, rgba(100, 255, 218, 0.1) 100%);
          color: var(--neon-blue);
        }

        &.el-button--danger {
          border-color: rgba(237, 100, 166, 0.5);

          &:hover {
            border-color: #ed64a6;
            box-shadow: 0 0 5px #ed64a6, 0 0 10px rgba(237, 100, 166, 0.5);
            color: #ed64a6;
          }
        }
      }

      .platform-option {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--tech-font);
        color: #ccd6f6;

        .platform-icon {
          width: 28px;
          height: 28px;
          border-radius: 4px;
          border: 1px solid rgba(100, 255, 218, 0.5);
          box-shadow: 0 0 8px rgba(100, 255, 218, 0.2);
          transition: all 0.3s ease;

          &:hover {
            transform: scale(1.1);
            box-shadow: 0 0 12px rgba(100, 255, 218, 0.4);
          }
        }
      }

      .account-config,
      .proxy-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid var(--neon-blue);
        border-radius: 6px;
        background: rgba(10, 25, 47, 0.6);
        backdrop-filter: blur(5px);
        position: relative;
        z-index: 1;
        overflow: hidden;
        transition: all 0.3s ease;
        width: 95%; // 添加宽度设置，可根据需要调整百分比或使用固定宽度

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: var(--grid-bg);
          background-size: 20px 20px;
          opacity: 0.5;
          z-index: -1;
        }

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 1px solid var(--neon-blue);
          border-radius: 8px;
          box-shadow: var(--glow-blue);
          pointer-events: none;
          z-index: -1;
          animation: pulse 3s infinite alternate;
        }

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .el-table {
          border: 1px solid rgba(100, 255, 218, 0.3);
          background: rgba(10, 25, 47, 0.4);

          .el-table__header-wrapper th {
            background: linear-gradient(90deg, rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 0.5));
            color: var(--neon-blue);
            border-bottom: 1px solid rgba(100, 255, 218, 0.5);
            text-shadow: var(--glow-blue);
          }

          .el-table__body-wrapper td {
            border-bottom: 1px dashed rgba(100, 255, 218, 0.2);
            color: #ccd6f6;

            &:hover {
              background: rgba(100, 255, 218, 0.05);
            }
          }
        }

        .account-actions,
        .proxy-actions {
          margin-top: 20px;
          display: flex;
          justify-content: flex-end;
          gap: 15px;
        }
      }

      .filter-item {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
        align-items: center;
        padding: 10px;
        border: 1px dashed rgba(100, 255, 218, 0.2);
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
          border-style: solid;
          border-color: rgba(100, 255, 218, 0.4);
          background-color: rgba(100, 255, 218, 0.03);
        }
      }

      .preview-actions {
        margin-bottom: 25px;
        display: flex;
        gap: 15px;
      }

      .preview-stats {
        margin-top: 25px;

        .el-alert {
          border: 1px solid rgba(100, 255, 218, 0.3);
          border-radius: 6px;
          background: linear-gradient(135deg, rgba(10, 25, 47, 0.5) 0%, rgba(10, 35, 68, 0.5) 100%);
          font-family: var(--tech-font);
          color: #ccd6f6;
          box-shadow: 0 0 15px rgba(100, 255, 218, 0.1);

          .el-alert__title {
            color: var(--neon-blue);
            text-shadow: var(--glow-blue);
            font-weight: 500;
          }

          .el-alert__description {
            color: #8892b0;
          }
        }
      }

      .step-actions {
        margin-top: 40px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        gap: 30px;
        padding: 20px;
        border-top: 1px solid rgba(100, 255, 218, 0.2);
      }

      .el-tag {
        border: 1px solid rgba(157, 78, 221, 0.5);
        border-radius: 15px;
        background-color: rgba(157, 78, 221, 0.1);
        color: #c7a6ff;
        font-family: var(--tech-font);
        box-shadow: var(--glow-purple);
        padding: 3px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px) rotate(2deg);
          background-color: rgba(157, 78, 221, 0.2);
        }
      }

      .el-collapse {
        border: 1px solid rgba(100, 255, 218, 0.2);
        border-radius: 6px;
        background-color: rgba(10, 25, 47, 0.5);

        .el-collapse-item__header {
          font-family: var(--tech-font);
          font-weight: 500;
          color: #ccd6f6;
          padding: 15px 20px;
          background-color: rgba(10, 25, 47, 0.3);
          transition: all 0.3s ease;

          &:before {
            content: "▸";
            margin-right: 10px;
            display: inline-block;
            transition: transform 0.3s ease;
            color: var(--neon-blue);
            text-shadow: var(--glow-blue);
          }

          &.is-active:before {
            transform: rotate(90deg);
          }
        }

        .el-collapse-item__content {
          padding: 20px;
          background-color: rgba(10, 25, 47, 0.2);
          border-top: 1px solid rgba(100, 255, 218, 0.1);
        }
      }
    }
  }

  .el-dialog {
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(10, 35, 68, 0.95) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(100, 255, 218, 0.15), inset 0 0 20px rgba(100, 255, 218, 0.05);
    font-family: var(--tech-font);
    color: #ccd6f6;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 8px;
      background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple)) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.6;
      z-index: 1;
      pointer-events: none;
    }

    .el-dialog__header {
      background-color: rgba(10, 25, 47, 0.8);
      padding: 18px 25px;
      border-bottom: 1px solid rgba(100, 255, 218, 0.2);

      .el-dialog__title {
        font-weight: 500;
        font-size: 18px;
        color: var(--neon-blue);
        text-shadow: var(--glow-blue);
      }

      .el-dialog__headerbtn .el-icon {
        color: #8892b0;
        transition: all 0.3s ease;

        &:hover {
          color: var(--neon-blue);
          text-shadow: var(--glow-blue);
        }
      }
    }

    .el-dialog__body {
      padding: 25px;
      background-color: rgba(10, 25, 47, 0.4);
    }

    .el-dialog__footer {
      border-top: 1px solid rgba(100, 255, 218, 0.1);
      padding: 15px 25px;
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      background-color: rgba(10, 25, 47, 0.6);
    }
  }

  // 自定义滚动条
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(10, 25, 47, 0.5);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(100, 255, 218, 0.3), rgba(157, 78, 221, 0.3));
    border-radius: 4px;
    border: 1px solid rgba(10, 25, 47, 0.8);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(100, 255, 218, 0.5), rgba(157, 78, 221, 0.5));
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
  }

  // 选择框样式
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: transparent;
    border-color: var(--neon-blue);
    box-shadow: var(--glow-blue);

    &:after {
      border-color: var(--neon-blue);
    }
  }

  .el-radio__input.is-checked .el-radio__inner {
    background-color: transparent;
    border-color: var(--neon-blue);
    box-shadow: var(--glow-blue);

    &:after {
      background-color: var(--neon-blue);
      box-shadow: 0 0 5px rgba(100, 255, 218, 0.8);
    }
  }

  .el-radio__input.is-checked+.el-radio__label {
    color: var(--neon-blue);
    text-shadow: var(--glow-blue);
  }

  // 标签样式
  .el-tag--success {
    background-color: rgba(72, 187, 120, 0.2); // 增加透明度使颜色更明显
    border-color: #48bb78; // 使用实色边框
    color: #48bb78; // 保持文字颜色
    box-shadow: 0 0 12px rgba(72, 187, 120, 0.3); // 增强阴影效果
    font-weight: 500; // 加粗文字
  }

  .el-tag--danger {
    background-color: rgba(237, 100, 166, 0.2); // 增加透明度使颜色更明显
    border-color: #ed64a6; // 使用实色边框
    color: #ed64a6; // 保持文字颜色
    box-shadow: 0 0 12px rgba(237, 100, 166, 0.3); // 增强阴影效果
    font-weight: 500; // 加粗文字
  }

  // 下拉菜单
  .el-select-dropdown {
    background-color: rgba(10, 25, 47, 0.9);
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 10px rgba(100, 255, 218, 0.1);

    .el-select-dropdown__item {
      color: #ccd6f6;
      padding: 10px 15px;

      &:hover {
        background-color: rgba(100, 255, 218, 0.1);
        color: var(--neon-blue);
      }

      &.selected {
        background-color: rgba(100, 255, 218, 0.15);
        color: var(--neon-blue);
      }
    }
  }
}

// 动画效果
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes scan {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

@keyframes float {
  0% {
    background-position: 0 0, 25px 25px;
  }

  100% {
    background-position: 50px 50px, 75px 75px;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes glitch {

  0%,
  100% {
    transform: skew(0deg);
  }

  1% {
    transform: skew(5deg);
  }

  2% {
    transform: skew(-5deg);
  }

  3% {
    transform: skew(0deg);
  }
}

@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes underline-glitch {

  0%,
  100% {
    width: 60%;
  }

  50% {
    width: 80%;
  }

  1%,
  3%,
  5% {
    width: 60%;
  }

  2%,
  4% {
    width: 70%;
  }
}
</style>